{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '常用插件:example/plugin/index', '附件插件'])}

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">

          <p>附件管理做为系统必备的一个模块，文件集中管理及易用是非常重要的。</p>
          <pre>var myLayerIndex;
// multiple=1时为多选，否则为单选
function open_image(){
    myLayerIndex = open_layer('选择图片', "{:url('attachment/index/index')}?iframe=1&callback=callbackImage&multiple=1", function (){});
}
// callback 回调函数, 用于处理选择的图片
function callbackImage(url){
    layer.close(myLayerIndex);
    console.log(url); // 多选时以逗号分隔
}</pre>
          <p class="mb-1">示例一：单图选择</p>
          <button type="submit" class="btn btn-primary" onclick="select_one();">选择</button>
          <p style="margin-top: 10px;">
            <img src="{$xpConfig['web_static']}/example/images/img-placeholder.png" class="img-thumbnail" alt="..." id="one">
          </p>
          <p class="mb-1 mt-1">示例二：多图选择</p>
          <button type="submit" class="btn btn-success" onclick="select_more();">选择</button>
          <p style="margin-top: 10px;" id="two">
            <img src="{$xpConfig['web_static']}/example/images/img-placeholder.png" class="img-thumbnail" alt="...">
          </p>
          <p class="mb-1 mt-1">示例三：input选择</p>
          <button type="submit" class="btn btn-info" onclick="select_file();">选择</button>
          <p style="margin-top: 10px;">
            <input type="text" class="form-control" id="three" style="width: 260px;">
          </p>
          <pre>选择图片函数: chooseOneImage('icon', '图标', '400*400px', true, 1)
//具体的用法可以查看函数代码或其他模块功能的代码</pre>
          <div>
            <p class="mb-1 mt-1">示例四：单选</p>
            {:chooseOneImage('icon', '图标', '400*400px', true, 1)}
          </div>
          <pre>选择图片函数: chooseManyImage('images', '产品图', '400*400px', true, 1)
//具体的用法可以查看函数代码或其他模块功能的代码
//多图选择，需在controller中加入:
View::assign('addJs', addJs(['sortable']));</pre>
          <div>
            <p class="mb-1 mt-1">示例五：多选</p>
            {:chooseManyImage('images', '产品图', '800*800px', true, 1)}
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    var myLayerIndex;
    function select_one(){
        myLayerIndex = open_layer('选择图片', "{:url('attachment/index/index')}?iframe=1&callback=callbackImage", function (){});
    }
    function callbackImage(url){
        layer.close(myLayerIndex);
        $('#one').attr('src', url);
    }
    function select_more(){
        myLayerIndex = open_layer('选择图片', "{:url('attachment/index/index')}?iframe=1&callback=callbackImage1&multiple=1", function (){});
    }
    function callbackImage1(url){
        $('#two').html('');
        layer.close(myLayerIndex);
        var arr = url.split(',');
        for (var i = 0; i < arr.length; i++) {
            $('#two').append(`<img src="${arr[i]}" class="img-thumbnail" alt="..." style="width: 100px; height: 100px;">`);
        }
    }
    function select_file(){
        myLayerIndex = open_layer('选择文件', "{:url('attachment/index/index')}?iframe=1&callback=callbackFile", function (){});
    }
    function callbackFile(url){
        layer.close(myLayerIndex);
        $('#three').val(url);
    }
  </script>